<template>
  <div>
    <h1>上传图片并选择风格</h1>
    <form @submit.prevent="submitForm">
      <label for="file">选择图片:</label>
      <input type="file" id="file" ref="fileInput" @change="handleFileChange" required><br><br>
      <label for="style">选择风格:</label>
      <select id="style" v-model="selectedStyle" required>
        <option value="梦幻动漫">梦幻动漫</option>
        <option value="唯美写实">唯美写实</option>
        <option value="绯红烈焰">绯红烈焰</option>
        <option value="彩绘日漫">彩绘日漫</option>
      </select><br><br>
      <button type="submit">提交</button>
    </form>

    <div v-if="imageUrls.length">
      <h1>生成的图片</h1>
      <div v-for="url in imageUrls" :key="url">
        <img :src="url" alt="生成的图片">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'PictureTrans',
  data() {
    return {
      selectedStyle: '',
      file: null,
      imageUrls: []
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    async submitForm() {
      if (!this.file || !this.selectedStyle) {
        alert('请选择图片和风格');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.file);
      formData.append('style', this.selectedStyle);

      try {
        const response = await fetch('/submit/', {
          method: 'POST',
          body: formData
        });

        if (response.ok) {
          const data = await response.json();
          this.imageUrls = data.image_urls;
        } else {
          const errorText = await response.text();
          alert(`提交失败: ${errorText}`);
        }
      } catch (error) {
        alert(`请求错误: ${error}`);
      }
    }
  }
};
</script> 

<style scoped>
.image-converter {
  max-width: 600px;
  margin: 0 auto;
}
.loading {
  color: #409eff;
  font-size: 18px;
  text-align: center;
}
</style>


<style scoped>
/* 全局设置字体为宋体，减小字体大小 */
.style-selector-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
}

.style-selector {
  display: flex;
  align-items: center;
  position: relative;
}

.style-selector label {
  margin-right: 10px;
  font-size: 15px;  /* 调整字体大小 */
}

.select-wrapper {
  position: relative;
  display: inline-block;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
  border-color:#3c4040
}

.select-wrapper select {
  padding: 5px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
  font-size: 14px;  /* 调整字体大小 */
}/**对应选择框里面文字 */

.background-decorator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
  border-radius: 8px;
  z-index: 0;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: none;
  background-color: #81dec5;
  color: white;
  cursor: pointer;
  font-size: 14px;  /* 调整字体大小 */
  border-radius: 8px;
  margin-left: 10px;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
}

button i {
  margin-left: 5px;
}

.converted-image-placeholder {
  width: 250px; /* 与图片的最大宽度相同 */
  height: 400px; /* 与图片的最大高度相同 */
  border: 2px solid  rgb(139, 203, 200);; /* 绿色描边 */
  border-radius: 8px; /* 圆角 */
  margin-bottom: 10px; /* 与下方按钮的距离 */
}

.converted-image-placeholder img {
  width: 250px; /* 设置图片宽度为固定值 */
  height: 400px; /* 设置图片高度为固定值 */
  object-fit: cover; /* 调整图片适应方式，使其填充整个框 */
  border-radius: 8px; /* 圆角 */
}

.converted-preview {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container button {
  margin-top: 10px;
  background-color: rgb(139, 203, 200);
  border-radius: 8px;
  font-family: 'SimSun', serif;  /* 设置字体为宋体 */
  font-size: 14px;  /* 调整字体大小 */
}

img {
  max-width: 300px;
}
</style>



  
  
